<template>
  <view class="c-select-container" v-show="data.length">
    <view class="c-select-tabs">
      <view class="c-select-tab" :class="{ 'c-select-tab-active': activeIndex == i }" @click="show(i)" v-for="(tab, i) in tabs" :key="i">
        <view class="c-select-tab-text">{{ tab }}</view>
        <nut-icon :class="[activeIndex == i ? 'arrow-up' : 'arrow-down']" name="right" size="9"></nut-icon>
      </view>
    </view>
    <view class="c-select-panel" :class="{ 'c-select-panel-active': open }">
      <view class="c-select-item" :class="{ 'c-select-item-active': activeItem[activeIndex] == item.label }" v-for="(item, i) in items[activeIndex]" :key="i" @click="tapItem(item.label)">
        <view>{{ item.label }}</view>
        <nut-icon name="checklist" size="12" v-show="activeItem[activeIndex] == item.label"></nut-icon>
      </view>
    </view>
    <view class="c-select-mask" :class="{ 'c-select-mask-active': open }" @click="close"></view>
  </view>
</template>

<script setup>
import { defineProps, ref, computed } from 'vue'
import { useDidShow } from '@tarojs/taro'
import CTag from '@/components/c-tag'

const props = defineProps({
  data: {
    type: Array,
    default() {
      return [
        {
          label: '设备',
          items: [
            { label: 'MP_L_A_0000002' },
            { label: 'MP_L_A_0000003' },
            { label: 'MP_L_A_0000001' },
            { label: 'MP_L_A_00000026' },
            { label: 'MP_L_A_00000061' },
            { label: 'MP_L_A_00000022' },
            { label: 'MP_L_A_00000021' },
            { label: 'MP_L_A_00000031' },
            { label: 'MP_L_A_00000011' },
            { label: 'MP_L_A_000000261' },
            { label: 'MP_L_A_000000612' },
            { label: 'MP_L_A_000000223' },
            { label: 'MP_L_A_000000214' },
            { label: 'MP_L_A_000000315' },
            { label: 'MP_L_A_000000116' }
          ]
        },
        {
          label: '门店',
          items: [
            { label: '未绑定门店' },
            { label: '联华(四苑)' },
            { label: '四季缘超市' },
            { label: '全天烟酒商行' },
            { label: '中纺服装城门口报刊亭' },
            { label: '天猫小店 秋航食品店' },
            { label: '阿明超市' },
            { label: '世纪华联3排10号' },
            { label: '花琴批发部' },
            { label: '水果篮子' }
          ]
        }
      ]
    }
  }
})

const items = ref([])
const tabs = computed(() => {
  return props.data.map(e => {
    items.value.push(e.items)
    return e.label
  })
})

const activeIndex = ref(null)
const activeItem = ref([null, null])
const open = ref(false)
const show = e => {
  if (open.value && activeIndex.value == e) {
    close()
  } else {
    activeIndex.value = e
    open.value = true
  }
}
const close = () => {
  activeIndex.value = null
  open.value = false
}

const tapItem = e => {
  activeItem.value[activeIndex.value] = e
  tabs.value[activeIndex.value] = e
  close()
}
</script>

<style lang="scss">
@import '@/assets/styles/custom_theme.scss';
.c-select-container {
  position: relative;
  height: 36px;
  .c-select-tabs {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    background: white;
    z-index: 9;
    .c-select-tab {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: $title-color;
      transition: all 0.25s;
      .c-select-tab-text {
        max-width: 126px;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .arrow-down {
        margin-left: 5px;
        transform: rotate(90deg);
        transition: all 0.25s;
      }
      .arrow-up {
        margin-left: 5px;
        transform: rotate(-90deg);
        transition: all 0.25s;
      }
    }
    .c-select-tab-active {
      font-weight: 500;
      color: $primary-color !important;
    }
  }
  .c-select-panel {
    width: 100%;
    height: 0;
    position: absolute;
    top: 36px;
    left: 0;
    overflow: auto;

    z-index: 99;
    visibility: 0;
    transition: 0.15s;
    -webkit-transition: 0.15s;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    background: white;

    .c-select-item {
      padding: 14px 12px;
      font-size: 14px;
      color: $text-color;
      border-bottom: solid 1px #f8f8f8;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &:last-child {
        border-bottom: none;
      }
    }
    .c-select-item-active {
      position: sticky;
      top: 0;
      bottom: 0;
      color: $primary-color;
      background: white;
      z-index: 1;
    }
  }

  .c-select-panel-active {
    visibility: 1;
    height: 300px;
  }

  .c-select-mask {
    width: 100%;
    height: 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
  }
  .c-select-mask-active {
    height: 100%;
    background: $marsk-bg-color;
    animation: showMask 0.2s 1;
  }
}
@keyframes showMask {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}
</style>
